<template>
	<view class="shop-cart">
		<template v-if="list.length">
			<!-- #ifndef MP-WEIXIN -->
			<uni-nav-bar :right-text="isNavBar?'完成':'编辑'" title="购物车" :fixed="true" :statusBar="true"
				@clickRight="isNavBar = !isNavBar"></uni-nav-bar>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<uni-nav-bar :right-text="isNavBar?'完成':'编辑'" leftText="购物车列表" :fixed="false" :statusBar="false"
				@clickRight="isNavBar = !isNavBar"></uni-nav-bar>
			<!-- #endif -->
			<!-- 商品列表 -->
			<view class="shop-list">
				<view class="shop-item" v-for="(item,index) in list" :key="index">
					<label class="radio" @tap="checkedFn(index)">
						<radio value="" :checked="item.checked" color="#ff3333" />
					</label>
					<image class="shop-img" :src="item.imgUrl" mode=""></image>
					<view class="shop-text">
						<view class="shop-name">{{item.name}}</view>
						<view class="shop-color f-color">{{item.color}}</view>
						<view class="shop-price">
							<view>¥{{item.price?item.price:item.pprice}}</view>
							<template v-if="!isNavBar">
								<view>*{{item.num}}</view>
							</template>
							<template v-else>
								<uni-number-box @change="changeNumber($event,index)" :min="1" :value="item.num">
								</uni-number-box>
							</template>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="shop-foot">
				<label class="radio" @tap="checkedAllFn">
					<radio value="" color="#FF3333" :checked="$store.getters.checkedAll" /><text>全选</text>
				</label>
				<template v-if="!isNavBar">
					<view class="shop-total">
						<view class="foot-count">合计: <text class="f-active-color">¥{{totalPrice}}</text></view>
						<view class="foot-num" @tap="goConfirmOrder">结算({{totalCount}})</view>
					</view>
				</template>
				<template v-else>
					<view class="shop-total">
						<view class="foot-num" style="background-color: #000;">移入收藏夹</view>
						<view class="foot-num" @tap="delGoodsFn">删除</view>
					</view>
				</template>
			</view>
		</template>
		<template v-else>
			<!-- #ifndef MP-WEIXIN -->
			<uni-nav-bar title="购物车" fixed="true" statusBar="false"></uni-nav-bar>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="title">购物车</view>
			<!-- #endif -->
			<view class="shop-else-list">
				<text>囧~购物车还是空的!</text>
			</view>
		</template>
		<tabBar currentPage="shopcart" />
	</view>
</template>

<script>
	import tabBar from "@/components/tabBar/tabBar.vue"
	export default {
		data() {
			return {
				isNavBar: false
			};
		},
		methods: {
			checkedAllFn() { //全选
				this.$store.commit("checkAll")
			},
			checkedFn(index) { //单选
				this.$store.commit("checkedFn", index)
			},
			changeNumber(e, index) {
				this.$store.commit({
					type: "changeNumber",
					payload: {
						e,
						index
					}
				})
			},
			delGoodsFn() {
				this.$store.dispatch("delGoodsFn")
			},
			goConfirmOrder() {
				this.$store.commit('goConfirmOrder')
			}
		},
		computed: {
			list() {
				return this.$store.state.cart.list
			},
			totalCount() {
				return this.$store.getters.totalCount
			},
			totalPrice() {
				return this.$store.getters.totalPrice
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-navbar__header-container-inner {
		span {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	::v-deep .uni-nav-bar-right-text {
		span {
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.shop-list {
		padding-bottom: 220rpx;

		.shop-item {
			display: flex;
			align-items: center;
			background-color: #F7F7F7;
			padding: 20rpx;
			margin-bottom: 10rpx;

			.shop-img {
				width: 200rpx;
				height: 200rpx;
			}

			.shop-text {
				flex: 1;
				padding: 20rpx;

				.shop-color {
					font-size: 26rpx;
				}

				.shop-price {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

	.shop-foot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		width: 100%;
		height: 100rpx;
		border-top: 2rpx solid #F7F7F7;
		background-color: #fff;
		box-sizing: border-box;
		bottom: 120rpx;

		.radio {
			display: flex;
			align-items: center;
			padding-left: 20rpx;
		}

		.shop-total {
			display: flex;
			height: 100%;

			.foot-num {
				background-color: #49BDFB;
				color: #fff;
				padding: 0 60rpx;
				line-height: 100rpx;
			}

			.foot-count {
				line-height: 100rpx;
				padding: 0 20rpx;
			}
		}
	}

	.shop-else-list {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #F7F7F7;
	}
</style>
